@charset 'utf-8';

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.center {
  width: 1190px;
  margin: 0 auto;
}

header {
  height: 35px;
  background-color: #F5F5F5;

  .center {
    display: flex;
    justify-content: space-between;

    .left {

      line-height: 35px;

      a {
        font-size: 13px;
        padding-right: 10px;
        color: #6c6c6c;
      }
    }

    .right {
      display: flex;
      line-height: 35px;

      a {
        font-size: 13px;
        padding-left: 10px;
        color: #6c6c6c;
      }

      .trigon {
        padding-right: 5px;
      }

      .show1 {
        position: relative;

        >div {
          width: 100px;
          background-color: white;
          position: absolute;
          display: none;
        }

        &:hover {
          background-color: white;

          div {
            display: block;
          }
        }
      }

      .show2 {
        position: relative;

        >div {
          width: 100px;
          background-color: white;
          position: absolute;
          display: none;
        }

        &:hover {
          background-color: white;

          div {
            display: block;
          }
        }
      }

      .show3 {
        position: relative;

        >div {
          width: 100px;
          background-color: white;
          position: absolute;
          display: none;
        }

        &:hover {
          background-color: white;

          div {
            display: block;
          }
        }
      }

      .show4 {
        position: relative;

        >div {
          width: 100px;
          background-color: white;
          position: absolute;
          display: none;
        }

        &:hover {
          background-color: white;

          div {
            display: block;
          }
        }
      }
    }

    span {
      padding-left: 10px;
    }

    a:hover {
      color: red;
      text-decoration: none;
      // .trigon {
      //   transform: rotate(180deg);
      //   transition: all 2s;
      // }
    }
  }
}

.search {
  height: 80px;


  .center {
    height: 100%;
    display: flex;
    justify-content: space-between;

    .search-log {
      width: 80px;
      height: 58px;
      padding-top: 11px;
    }

    .search-box {
      display: flex;
      height: 42px;
      padding-top: 19px;

      .search-triggers {
        ul {
          width: 106px;
          height: 42px;
          font-size: 13px;
          background-color: #F5F5F5;
          border-radius: 25px 0 0 25px;
          text-align: center;
          line-height: 42px;

          &:hover {
            border-radius: 25px 0 0 0;

            .hidden-li {
              display: block;
            }

            a:hover {
              color: red;
              text-decoration: none;
            }
          }

          li {
            background-color: #F5F5F5;
          }

          .one-li {
            border-radius: 25px 0 0 25px;

            .magnifier {
              margin-right: 10px;
            }

            .arrow {
              margin-left: 10px;
            }
          }

          .hidden-li {
            display: none;
          }


        }
      }

      .search-input {
        input {
          width: 236px;
          height: 42px;
          background-color: #EBEBEB;
          border: none;
        }
      }

      .search-btn {
        width: 81px;
        height: 42px;
        background-color: #EBEBEB;
        border-radius: 0 25px 25px 0;

        button {
          width: 81px;
          height: 42px;
          background-color: #FF5000;
          border-radius: 25px;
          border: none;
          color: white;
        }
      }
    }
  }
}

main{
  background-color: rgb(234, 232, 235);
  .center{
    width: 1200px;
    height: 100%;
    padding-top: 18px;
    .top{
      height: 73px;
      background-color: white;
      padding-top: 18px;
      border-radius: 25px 25px 0 0;
      border-bottom: 1px solid #e6e6e6;
      display: flex;
      justify-content: space-between  ;
      
      .top-left{
        font-size: 18px;
        font-weight: 700;
        padding-left: 20px;
        padding-top: 10px;
      }

      .top-right{
        padding-right: 20px;
        display: flex;
        .text1{
          font-size: 13px;
          padding-top: 15px;
        }
        
        .num2{
          font-size: 24px;
          margin-right: 20px;
          padding-top: 10px;
          color: red;
        }

        .btn{
          width: 74px;
          height: 42px;
          border-radius: 25px;
          background-color: #AAAAAA;
          padding-top: 10px;
        }
      }

    }

    .buttom{
      padding-bottom: 40px;
      
      .cartMain{
        
        background-color: white;
        border-radius: 0 0 25px 25px;
        .cartMain_hd{
          ul{
            .list_info{
              padding-left: 30px;
            }
          }
        }

        .cartBox{
          
          .order_content{
            width: 1120px;
            margin: 0 auto;
            background-color: #F5F5F5;
            border-radius: 25px;
            // display: flex;
            // justify-content: space-around;
            ul{
              display: flex;
  
              li{
                  .sum{
                    width: 39px;
                    height: 23px;
                  
                }
              }
              .list_sum{
                padding-left: 15px;
              }
              .list_op{
                padding-left: 20px;
              }
            }
          }
        }

        .bar-wrapper{
          background-color: white;
          border-top: 1px solid #f6f6f6;
          display: flex;
          justify-content: space-between;
          .bar-left{
            width: 200px;
            ul{
              display: flex;
              justify-content: space-between;
              li{
                line-height: 50px;
                label{
                  top: 8px;
                }
              }
            }
          }
        }
      }
    }
  }
}

footer {
  margin-top: 60px;

  .center {
    overflow: hidden;

    >ul {
      height: 40px;
      border-top: 1px solid gray;
      list-style: none;

      li {
        float: left;
        margin-top: 10px;
        padding-left: 14px;
        padding-right: 14px;
        border-right: 1px solid gray;


        a {
          font-size: 12px;

          &:hover {
            color: red;
            text-decoration: none;
          }
        }
      }
    }

    >.buttom {
      border-top: 1px solid gray;

      .top {
        width: 100%;
        margin-top: 10px;

        a {
          font-size: 12px;
          padding-right: 12px;

          &:hover {
            color: red;
            text-decoration: none;
          }
        }

        span {
          font-size: 12px;
          padding-left: 40px;
        }
      }

      .under {
        height: 30px;

        ul {
          list-style: none;

          li {
            float: left;
            font-size: 12px;
            border-right: 1px solid gray;
            padding-right: 5px;

            a:hover {
              color: red;
              text-decoration: none;
            }
          }

          .text {
            padding-left: 5px;
          }

          .text2 {
            padding-left: 5px;
            border-right: 0;
          }
        }
      }
    }
  }
}